<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            height: 50px;
        }
        li span{
            display: inline-block;
        }
        li p{
            float: right;
            margin-right: 10px;
            padding: 0px 6px;
            text-align: center;
            font-size: 14px;
            color: white;
            background: orange;
            display: none;
        }
        li span{
            padding: 6px;
        }
        #content{
            width: 400px;
            background: rgb(240, 240, 240);
        }
        span{
            display: block;
        }
        
        
        li  span:nth-of-type(1){
            float: left;
        }
      
        li  span:nth-of-type(2){
            float: right;
            padding-right: 25px;
            font-size: 10px;
        }
    </style>
</head>
<body>
<div id="content">
    <h3>搜热点</h1>
    <ol>
        <li><span>1</span>三八线<p>加入看单</p><span>442万</span></li>
        <li><span>2</span>三八线<p>加入看单</p><span>442万</span></li>
        <li><span>3</span>三八线<p>加入看单</p><span>442万</span></li>
        <li><span>4</span>吉详天宝<p>加入看单</p><span>442万</span></li>
        <li><span>5</span>亲爱的翻译官<p>加入看单</p><span>442万</span></li>
        <li><span>6</span>仙剑云之凡<p>加入看单</p><span>442万</span></li>
        <li><span>7</span>权力的游戏第五季<p>加入看单</p><span>442万</span></li>
        <li><span>8</span>琅琊榜<p>加入看单</p><span>442万</span></li>
        <li><span>9</span>那年青春我们正好<p>加入看单</p><span>442万</span></li>
        <li><span>10</span>乡村受情8（上）<p>加入看单</p><span>442万</span></li>
    </ol>
</div>
</body>
<script src="js/jquery.js"></script>

    <script>
        $(function(){
            $('#content  span:nth-of-type(1)').css({'display':'inline-block','width':'20px',
        'height':'20px','backgroundColor':'red','margin':'6px','text-align':'center'})
        $('#content  span:nth-of-type(1):gt(3)').css({'display':'inline-block','width':'20px',
        'height':'20px','backgroundColor':'blue','margin':'6px','text-align':'center'})

  $('#content  span:nth-of-type(1):eq(2)').css({'display':'inline-block','width':'20px',
        'height':'20px','backgroundColor':'yellow','margin':'6px','text-align':'center'})
        $('#content  span:nth-of-type(2)').css({'background':'url(images/orange.jpg )  right  -3px no-repeat'})
        $('#content  span:nth-of-type(2):eq(7)').css({'background':''})
        $('#content  span:nth-of-type(2):eq(8)').css({'background':''})
        $('#content ul>li').mouseover(function () {
        $(this).find(':hidden').show()  //找到隐藏后代 show()显示
        $(this).children().show()
       
      })
      $('#content ol>li').mouseout(function () {
        $('#content ol>li>p:visible').hide()   //hide()隐藏
        // $(this).find(':visible').hide()
      })
    })
 </script>

 
</script>
</html>
